<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            background-color: red;
        }

    </style>
</head>
<body>
    <!-- <button>按钮</button>
    <ul>
        <li>貂蝉</li>
        <li>杨玉环</li>
        <li>西施</li>
        <li>小西八</li>
        <li>小日本</li>
    </ul>
    

    <script>
        var ul=document.querySelector('ul')
        var but=document.querySelector('button')


        but.onclick=function(){
            li=document.createElement('li')
            ul.appendChild(li)
            li.innerHTML='陈俊'
            ul.insertBefore(li,ul.children[0])            
        }

        ul.addEventListener('click',function(e){
            // e.target.style.backgroundColor='pink'
            if(e.target.nodeName=='LI'){
                for(var  i=0 ; i<ul.children.length ; i++){
                    ul.children[i].className=''
                }
                e.target.className='red'

            }
        }) -->
    <!-- <button>按钮</button>
    <ul>
        <li>西施</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
        <li>小龙女</li>
    </ul>
    
    <script>
        // 获取按钮和ul的元素
        var ul=document.querySelector('ul')
        var but=document.querySelector('button')
        // 给按钮添加点击事件
        but.onclick=function(){
            // 创建li
            li=document.createElement('li') 
            // 把创建的li插入到ul里
            ul.appendChild(li)
            // 在li的后面动态添加名字
            li.innerHTML='妍妍'
            // 动态生成li在ul的前面
            ul.insertBefore(li,ul.children[0])
        } 
            //给ul添加侦听事件  添加一个事件委托 
        ul.addEventListener('click',function(e){
            // 如果你点击的li元素不等于LI元素就执行下一行
            if(e.target.nodeName=='LI'){
                // 循环，循环的条件是ul的子元素的长度
                for(i=0 ;i<ul.children.length;i++){
                    // ul下面的每一个子元素都为空 ，排他思想
                    ul.children[i].className=''
                }

                e.target.className='red'
            }
        })

    </script> -->
    <!-- <button>按钮</button>
    <ul>
        <li>小怪</li>
        <li>大怪</li>
        <li>大大怪</li>
    </ul>

    <script>
        //获取到元素
        var but=document.querySelector('button')
        var ul=document.querySelector('ul')

        // 给按钮添加点击事件
        but.onclick=function(){
            // 创建li 每点击一下就添加一个li
            li=document.createElement('li')
            // 将li添加到ul里面
            ul.appendChild(li)
            // 在li后面动态生成小妍
            li.innerHTML='小妍'
            // 将li插入到ul的最前面
            ul.insertBefore(li,ul.children[0])
        }
        // 给ul添加事件委托
        ul.addEventListener('click',function(e){
            // 如果我点击的当前元素不等于LI 就执行下一条
            if(e.target.nodeName == 'LI'){
                // 判断的条件是ul下面的子元素的长度为空
                for(i=0 ; i<ul.children.length ; i++){
                    // 
                    ul.children[i].className=''
                }
                e.target.className='red'
            }
        })
    </script> -->
    <!-- <button>按钮</button>
    <ul>
        <li>貂蝉</li>
        <li>小小怪</li>
        <li>大大怪</li>
        <li>小西巴</li>
    </ul>
    <script>
        var but=document.querySelector('button')
        var ul=document.querySelector('ul')


        but.onclick=function(){
            var li=document.createElement('li')
            ul.appendChild(li)
            li.innerHTML='妍妍'
            ul.insertBefore(li,ul.children[0])

        }

        ul.addEventListener('click',function(e){
            if(e.target.nodeName=='LI'){
                for(i =0 ; i<ul.children.length ; i++){
                    ul.children[i].className=''
                }
                e.target.className='red'
            }
        })




    </script>
 -->

        <button>按钮</button>
        <ul>
            <li>小小怪</li>
            <li>大大怪</li>
            <li>小心超人</li>
            <li>加菲猫</li>
        </ul>

        <script>
            var but=document.querySelector('button')
            var ul=document.querySelector('ul')

            but.addEventListener('click',function(){
                var text=prompt('请输入你的角色')
                var li=document.querySelector('li')
                // li.innerHTML=text
                // li=text
                // ul.appendChild(li)
                ul.innerHTML = `<li>${text}</li>` + ul.innerHTML
            })

            ul.addEventListener('click',function(e){
                    // lis=document.querySelectorAll('li')
                    if(e.target.nodeName==='LI'){
                        for(i=0 ; i<ul.children.length ;i++){
                            ul.children[i].className=''
                        }
                        e.target.className='red'
                    }
            })


        </script>
</body>
</html>